<template>
    <div style="position:relative">
        <!-- <div class="header" @click="direct('integralDetailed')">
            <span class="title_mx">积分明细</span>
        </div> -->
        <div class="box">
            <div class="photo">
                <img class="img" src="@/assets/imgs/manage/coin.png" alt="">
            </div>
            <p class="balan">我的积分</p>
            <h5 id="money" class="money">{{userInfos.canPoint}}</h5>
            <div class="btns">
                <!-- <button class="btn_1" @click="direct('exchangeDalance')">兑换余额</button>
                <button class="btn_3" @click="direct('exchange')">充值积分</button>
                <button class="btn_3" @click="direct('index')">商城购物</button>
                <button class="btn_2" @click="direct('help')">帮助说明</button> -->
                <button class="btn_1" @click="direct('integralDetailed')">积分明细</button>
                <button class="btn_1" @click="direct('help')">帮助说明</button>
            </div>
        </div>
    </div>
</template>

<script>
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import { maskTips } from '@/assets/js/dom'
export default {
    data() {
        return {
            userInfos: {}
        }
    },
    components: {
    },
    mounted() {
        this.getIntegral();
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: "/" + val });
        },
        getIntegral: async function () {
            var that = this
            let userToken = localStorage.getItem("token") || '' //用户token值
            $.ajax({
                url: domain + "/xshk/f/assets/query?token=" + userToken,
                data: {},
                type: "post",
                dataType: "json",
                xhrFields: { withCredentials: true },
                crossDomain: true,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: function (data) {

                    if (data.code == -5) {
                        maskTips({ id: "bal-fail", txt: data.message })
                        that.$router.push('/login')
                        return false;
                    }
                    if (data) {
                        if (data.code === 0) {
                            // data.data.accountBalance = data.data.accountBalance || "0.00";
                            this.userInfos = data.data
                            $('#money').text(this.userInfos.canPoint)
                        } else {

                        }
                    } else {
                        console.log("数据为空");
                    }
                },
                error: function () {
                    // console.log("登录失败");
                }

            })
        }
    },

}
</script>

<style  scoped>
.header {
    /* height: 0.92rem; */
    position: absolute;
    z-index: 9999;
    right: 0.34rem;
    top: -0.35rem;
}
.title_mx {
    font-size: 0.3rem;
    color: #333;
}
/*余额详情*/
.box{
    padding: 1.8rem .48rem 0;
    box-sizing: border-box;
    /* margin-top: .92rem; */
    width: 100%;
    text-align: center;
}
.box .photo .img{
    width: 1.88rem;
    height:1.88rem;
}

.box .photo .userhead{
    margin:0 auto;
    width: .74rem;
    height: .94rem;
    border-top:2px solid #999;
    border-left:1px solid #999;
    border-right:1px solid #999;
    border-bottom:2px solid #999;
}
.box .balan{
  font-weight: 600;
  font-size: .33rem;
  line-height: 1.06rem;
  color:#333;
  font-family: "PingFang-SC-Medium";
}
.box .money{
  font-size: .8rem;
  font-weight: 800;
  color:#333;
  font-family: "PingFang-SC-Heavy";
}
.midl{
  position: absolute;
  font-size: .43rem;
  font-weight: 600;
  color: #333;
  font-family: "PingFang-SC-Heavy";
  right: 27%;
  top: 46.5%;
}
.box .money b{
    font-size: .8rem;
    font-weight: 800;
    display: inline-block;
    margin-right:4px;
}
.box .btns{
    width:100%;
    margin-top: .7rem;
}
.box .btns button{
  font-family: "PingFang-SC-Regular";
  float:left;
  width:100%;
  height: .96rem;
  margin-bottom: .3rem;
  font-size:.38rem;
  border: none;
  outline:none;
  border-radius: 5px;
}
.box .btns .btn_1{
    background: #aad114;
    color:#fcfefd;
}
.box .btns .btn_2{
    background: #eee;
    color:#323232;
}
.box .btns .btn_3{
    background: #aad114;
    color:#fefefe;
}
</style>
